<template>
    <h1>APP 组件</h1>
    <hr />
    <h1>原价：{{ price }} <button @click="price = 500">修改原价</button></h1>
    <h1>会员价：{{ vipPrice }} </h1>
    <button @click="appName = '李四'">修改名字：{{ appName }}</button>
    <hr /> 
    <ul>
        <li>id: {{ obj.id }}</li>
        <li>age: {{ obj.age }} <button @click="obj.age++">增加年龄</button></li>
    </ul>
</template>

<script setup>
import { ref, watch, reactive } from 'vue'

const price = ref(1000)
const vipPrice = ref(0)

const appName = ref("张三")

const obj = reactive({
    id: "qf001",
    age: 18
})

watch([price, appName], () => {
    console.log("当前侦听器会在 price/appName 的值发生变化的时候执行");
    vipPrice.value = price.value / 2
})

watch(obj, () => {
    console.log("当前obj侦听器执行~~");
})


</script>

<style>

</style>
